<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
// import { NDataTable, NButton, NCard, NInput, NGrid, NGi, NGridItem, NFlex, NVirtualList, NDialogProvider, useDialog, createDiscreteApi, treeDark, NModal, NFormItem,NSpace } from 'naive-ui'
import baseCard from '@/components/base-card/index.vue'
import baseTable from '@/components/base-table/index.vue'
import { useMenuRecordStore } from '@/stores/menuRecord'
import { useRouter } from 'vue-router';
import { addDays, isYesterday, isToday } from 'date-fns/esm'
import { NSlider } from 'naive-ui'
// console.log(isToday);

// const { dialog } = createDiscreteApi(["dialog"])

const value = ref(addDays(Date.now(), 1).valueOf());
const audioRef = ref<any>(null)
const transcript = ref('');
const contentBoxRef = ref(null)
const calendarRef = ref(null)

// const marks = ref({
//     0: '0',
//     4.17: '1',
//     8.34: '2',
//     12.51: '3',
//     16.68: '4',
//     20.85: '5',
//     25.02: '6',
//     29.19: '7',
//     33.36: '8',
//     37.53: '9',
//     41.07: '10',
//     45.87: '11',
//     50.04: '12',
//     54.21: '13',
//     58.38: '14',
//     62.55: '15',
//     66.72: '16',
//     70.89: '17',
//     75.06: '18',
//     79.23: '19',
//     83.04: '20',
//     87.57: '21',
//     91.74: '22',
//     95.91: '23',
//     100.08: '24',
// })


const valuess = ref(50)

// function handleUpdateValue( _: number,{ year, month, date }: { year: number, month: number, date: number } ) {
//         message.success(`${year}-${month}-${date}`)
//       }

// console.log(calendarRef);

</script>
<template>
    <baseCard style=" min-width: 1920px;">
        <div class="workbenches_container">
            <div class="calendar_box">
                <n-space justify="center">
                    <div class="mark_box">
                        <div class="mark_box_ul" style="background-color: #f11b1b;"></div>
                        <span style="margin-left: 5px;">重要事项 </span>
                    </div>
                    <div class="mark_box">
                        <div class="mark_box_ul" style="background-color: #004cff;"></div>
                        <span style="margin-left: 5px;">关建里程碑</span>
                    </div>
                    <div class="mark_box">
                        <div class="mark_box_ul" style="background-color: #ffb300;"></div>
                        <span style="margin-left: 5px;">重要节点</span>
                    </div>
                    <div class="mark_box">
                        <div class="mark_box_ul" style="background-color: #00fff1;"></div>
                        <span style="margin-left: 5px;">领导指派</span>
                    </div>
                </n-space>
                <div style="height:100%">
                    <n-calendar ref="calendarRef" class="nCalendar" style="height:100%;" v-model:value="value" #="{ year, month, date }">
                        <!-- {{ year }}-{{ month }}-{{ date }} -->
                        <div class="calendar_slot_default">
                            <div class="calendar_slot_default_ul" style=" background-color: #f11b1b;">
                                任务任务任务任务任务任务
                            </div>
                            <div class="calendar_slot_default_ul" style=" background-color: #ffb300;">
                                任务任务任任务任务任务任务任务任务任务任务任务任务任务任务任务任务任务务任务任务</div>
                        </div>
                    </n-calendar>
                </div>
            </div>
            <div
                style="border-top:solid 1px #eee;border-right:solid 1px #eee;border-bottom:solid 1px #eee;height:100% ;width: 30%;padding: 0 5px;overflow: hidden;box-sizing: border-box;">
                <div style="text-align: center;font-size: 20px;">今日日程</div>
                <div
                    style="border: none;height:calc(100% - 32px)  ;padding: 10px;display: flex;justify-content: start;">
                    <!-- .n-calendar .n-calendar-cell.n-calendar-cell--selected .n-calendar-cell__bar {
                        background-color: var(--n-bar-color);
                        background-color: rgba(0, 0, 0, 0.4);
                        height: 100%;
                    } -->
                    <n-timeline>
                        <n-timeline-item type="success" content="啊" />
                        <n-timeline-item type="success"
                            content="哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成功哪里成哪里成功哪里成功" />
                        <n-timeline-item type="success" content="哪里错误哪里错误哪里错误哪里错误哪里错误" />
                        <n-timeline-item type="success" content="重要任务重要任务重要任务重要任务重要任务重要任务" />
                        <n-timeline-item type="success" content="任务任务任务任务任务任务任务任务" />
                        <n-timeline-item type="success" content="啊任务任务任务任务任务任务任务任务" />
                        <n-timeline-item type="default" content="任务任务任务任务任务任务任务任务任务" />
                        <n-timeline-item type="default" content="啊任务任务任啊啊务任务任务任务" />


                    </n-timeline>
                </div>
            </div>
        </div>
    </baseCard>
</template>

<style src="./index.scss" scoped></style>
<style lang="scss" scoped>
.workbenches_container {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.calendar_box {
    border: solid 1px #eee;
    height: 100%;
    width: 70%;
    box-sizing: border-box;
    padding: 10px;
}

.mark_box {
    height: 10px;
    line-height: 10px;
    display: flex;
}

.mark_box_ul {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #f11b1b;
}

.calendar_slot_default {
    border: none;
    height: 100%;
    text-align: center;
    height: 80px;
    padding: 15px;
}

.calendar_slot_default_ul {
    box-sizing: border-box;
    color: black;
    border-radius: 5px;
    height: 26px;
    width: 132px;
    overflow: hidden;
}

.calendar_slot_default_ul:nth-child(1){
    margin-bottom: 2px;
}


// ::v-deep .n-calendar .n-calendar-cell.n-calendar-cell--selected .n-calendar-cell__bar{
//     background-color:rgba(24,160,88,0.3);
//     height: 100%;
//     z-index: 1;
// }

</style>
